<script setup>
import { reactive } from "vue";
import BaseCard from "../ui/BaseCard.vue";

let filters = reactive({ frontend: true, backend: true, career: true });

const setFilter = function (event) {
  const inputId = event.target.id;
  const isActive = event.target.checked;
  const updatedFilter = {
    ...filters,
    [inputId]: isActive,
  };
  
  filters = updatedFilter;
  emit("change-filter", updatedFilter);
};

const emit = defineEmits(["change-filter"]);
</script>

<template>
  <BaseCard>
    <h2>Find Your Coach</h2>
    <span class="filter-option">
      <input type="checkbox" id="frontend" checked @change="setFilter" />
      <label for="frontend">Frontend</label>
    </span>
    <span class="filter-option">
      <input type="checkbox" id="backend" checked @change="setFilter" />
      <label for="backend">Backend</label>
    </span>
    <span class="filter-option">
      <input type="checkbox" id="career" checked @change="setFilter" />
      <label for="career">Career</label>
    </span>
  </BaseCard>
</template>

<style scoped>
h2 {
  margin: 0.5rem 0;
}
.filter-option {
  margin-right: 1rem;
}

.filter-option label,
.filter-option input {
  vertical-align: middle;
}
.filter-option label {
  margin-left: 0.25rem;
}
.filter-option.active label {
  font-weight: bold;
}
</style>
